 <template>
 <body>
    <div class="register" id="#app">
     <div class="register-title" v-for="reg in  regList" :key="reg.id">
       <img :src="(reg.img)" alt="">
       <h1>{{reg.title}}</h1>
     </div>
     <div class="register-form">
       <form action="">
       <p><label for="">用户名:</label> <input type="text" placeholder="请输入用户名" name="name" v-model="name" @blur="checkname">
       <span>{{msgname}}</span>
       </p>

       <p><label for="">密码:</label> <input type="password" placeholder="请输入密码" name="pwd" v-model="password" @keyup="checkpwd">
       <span class="">{{msgpassword}}</span></p>
       <p><label for="">手机号:</label> <input type="text" placeholder="请输入手机号" name="phone" v-model="phone" @blur="checkPhone">
       <span class="">{{msgphone}}</span></p>
      <p>
        <input type="button" v-model="btn" @click="checkCode" style="width:110px; height: 40px;">
        <input type="text" placeholder="验证码" style="width:242px;height: 40px;margin-left:10px">
      </p>
      <p>
         <input type="checkbox" v-model="check" @click="checkagree" style="height:15px;width:15px;margin-top:10px"
         >已阅读并同意:小米<em>用户协议 </em> 和 <em>保密协议</em><span style="margin-left:20px;color:red">{{checkagree1}}</span>
      </p>
      <p>
        <input type="submit" value="立即注册"  @click.prevent="register($event)" style="background:red;color:#fff">
      </p>
       <div class="success" v-show="isfalse">
        <h2>注册成功</h2>
       <div class="success-body">
          <span @click="goLogin">登录</span>
          <span>取消</span>
       </div>
       </div>
       </form>
     </div>
  </div>
  <div class="flooter">
    <ul v-for="item in ulList" :key="item.id">
      <li >{{item.li1}}</li>
      <li>{{item.li2}}</li>
      <li>{{item.li3}}</li>
      <li>{{item.li4}}</li>
    </ul>
    <p>小米公司版权所有-京ICP备10046444- 
京公网安备<img :src="(img)" alt=""> 11010802020134号京ICP证110507号</p>
  </div>
 </body>
</template>
<script>
 export default {
data:()=>({
   isfalse:false,
   name:"",
   password:"",
   phone:"",
   msgname:"",
   msgpassword:"",
   msgphone:"",
   checkagree1:"",
   check:true,
   btn:"获取短信验证码",
   disab:false,
   time:10,
  regList:[
    {
      title:"注册小米账号",
      img:"https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png",
    },
  ],
ulList:[
  {
    li1:"简体 |",
    li2:"繁体 |",
    li3:"Englist |",
    li4:"常见问题 |",
  },
],
 img:"https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png",
}),
created(){
   console.log(layer)
   this.getlocalStorage()
},
methods: {
  // 检验账号
   checkname(){
     
     if(this.name.length==0){
       this.msgname="用户名不能为空"
     }else if(this.name.length<2){
       this.msgname="用户至少2个字符"
     }else{
       this.msgname=""
     }
     return this.name>2
     this.name=true
   },
  //  检验密码
   
   checkpwd(){
      let word =this.password
   
      if(word.length==0){
        this.msgpassword="密码不能为空"
      }
      let count =0;
      if(/[0-9]/.test(word)){
        count++
      }
      if(/[A-Za-z]/.test(word)){
        count++
      }
      if(/[^0-9A-Za-z]/.test(word)){
      count++
      }
      if(count==3 && word.length>=6){
        this.msgpassword="高强度"
      }else if(count==2&& word.length>=6){
        this.msgpassword="中强度"
      }else{
        this.msgpassword="低强度"
      }
      return word >=0
      this.password=true
   },
  // 检验手机号
  checkPhone(){
    let word= this.phone.trim()
    if(word.length==0){
       this.msgphone="请输入手机号"
    }
    if(/^1[0-9]{10}$/.test(word)){
      this.msgphone=""
    }else(
      this.msgphone="请输入正确的手机号"
    )
    return word 
    this.phone=true
  },
  // 验证码
  checkCode(){
     this.disab=true;
     setTimeout(this.enCode,1000)
  },
  enCode(){
    if(this.time>0){
      this.btn=this.time+"秒后重新获取"
      setTimeout(this.enCode,1000)
      this.time--
    }else{
      this.disab=false;
      this.btn="获取短信验证码"
      this.time=10
    }
  },
  // 勾选框 
checkagree(){
  if(!this.check){
   this.checkagree1=""
  }else{
    this.checkagree1="请阅读用户协议"
  }
  return this.check
},
register(event){
   
  if((this.name && this.phone &&this.password)!=false){
      let userList=[{
        name:this.name,
        password:this.password,
        phone:this.phone
      }]
      localStorage.setItem('userList',JSON.stringify(userList))
      this.isfalse = true
  }else{
  
  }
  this.getlocalStorage()
},
getlocalStorage(){
  console.log(JSON.parse(localStorage.getItem('userList'||"[]")))
},
// this.$router.replace{path：‘/’ }类似，不再赘述
goLogin(){
  console.log(111)
  this.$router.replace({
    path:"/login"
  })
}
  },
}
</script>

<style lang='less'>
body{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  margin-top: 80px;
  .register{
    display: flex;
    margin: auto;
    background:#fff;
    width: 854px;
    padding-bottom: 10px;
    flex-direction: column;
    text-align: center;
    .register-title{
     margin-top: 10px;
    }
    .register-form{
      position: relative;
      .success{
        position: absolute;
        top: 100px;
        left: 313px;
        height:115px;
        width:300px;
        background:#f9f9f9;
        border-radius: 5px;
        opacity: 0.9;
        box-shadow: 2px 2px 2px 2px;
       .success-body{
           width:276px;
           span:first-child{
             width: 70px;
             height: 25px;
             background: green;
             float: left;
             color: #fff;
             text-align: center;
             line-height: 25px;
             box-shadow: 2px 2px 2px 2px;
             margin-left: 20px;
             border-radius: 3px;
           }
           span:last-child{
             border-radius: 3px;
             float: right;
             width: 70px;
             height: 25px;
             background: red;
             color: #fff;
             text-align: center;
             line-height: 25px;
             box-shadow: 2px 2px 2px 2px;
         
           }
        }
      }
      p{
         
         height:60px;
         
        label{
          display: inline-block;
          text-align: left;
          width: 70px;
    
        }
        input{
          height: 40px;
          width: 276px;
        }
        em{
         font-weight: normal;
        }
        span{
         width: 200px;
         text-align: left;
         display: block;
         position: absolute;
         right:330px;
        }
      }
    }
  }
  .flooter{
    margin-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    ul{
     margin: auto;
      height: 30px;
      li{
        padding: 0px 10px;
        float: left;
        list-style: none
      }
    }
    p{
       margin: auto;
    }
  }
}
</style>